<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#fff" borderRadius="25rpx 25rpx 0 0" :animation="true">
		<view class="popupBox">
			<text class="edit-text" @click="goToEditPage">编辑</text>
			<text class="del-text" @click="deleteCommit">删除</text>
			<text class="cancel" @click="hidePopup">取消</text>
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref,defineExpose,defineEmits,watchEffect} from 'vue';
	const popupRef = ref(null);
	const emit = defineEmits();
	// 接收父组件传递的 CommunityID
	const props = defineProps({
		communityID: {
			type: Number,
			required: true,
			default: 0
		}
	});
	watchEffect(() => {
		console.log('父组件CommunityID', props.communityID);
	})
	// 暴露方法给父组件
	const showPopup = () => {
		if (popupRef.value) {
			popupRef.value.open();
		}
	};

	const hidePopup = () => {
		if (popupRef.value) {
			popupRef.value.close();
		}
		console.log('关闭弹窗');
	};
	// 删除操作
	const deleteCommit = () => {		
		uni.showModal({
			title: '提示',
			content: `确认删除？`,
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定')
					emit('deleteCommit',props.communityID);
				} else if (res.cancel) {
					hidePopup();  // 关闭弹窗
					console.log('用户点击取消')
				}
			}
		})
		console.log('删除操作');
	};
	// 跳转到编辑页面
	const goToEditPage = () => {
		uni.navigateTo({
			url: `/pages/community/publishPage?communityID=${props.communityID}`
		});
		hidePopup(); // 关闭弹窗
	};
	// 暴露这两个方法
	defineExpose({
		showPopup,
		hidePopup
	});
</script>


<style lang="scss" scoped>
	.popupBox {
		width: 100%;
		height: 100%;
		padding: 50rpx 0 60rpx 0;
		background: #FFFFFF;
		border-radius: 25rpx 25rpx 0 0;
		display: flex;
		flex-direction: column;
		gap: 30rpx;

		text {
			width: 100%;
			padding: 15rpx 0;
			font-size: 34rpx;
			text-align: center;
			letter-spacing: 6rpx;
			font-family: fangsong;
		}
	}
</style>